<template>
<div class="db-welcome">
    <div class="cb">
        <div style="float:left">
            <h2 style="color:#9a9cff">系统</h2>
        </div>
        <div style="float:right;padding-top:8px">
            <a v-link="{path:'/add'}"><font style="color:#65C3FF"><i class="iconfont icon-add2" style="font-size:15px">增加系统  </i></font></a>
        </div>
    </div>
    <div class="line"></div>
    <ul class="cb db-wel-items">
        <li class="fl" v-for="(index,system) in system_list" >
            <div class="cb">
                <a @click="doSystemChanged(index,system.system_id)" v-bind:class="system.system_id == current_chose_system.system_id ? 'project_chosed' : ''">
                    <i class="iconfont icon-projects fl"></i>
                    <div class="fl db-wel-item" style="float:left;margin-right:20px">
                        <h1>{{system.system_name}}</h1>
                    </div>
                </a>
                <div style="float:left;"  v-bind:class="system.system_id != current_chose_system.system_id ? 'displaynone' : ''">
                    <a v-link="{path:'/add'}"><font style="color:gray">系统基本设置</font></a>
                    <br>
                    <a v-link="{path:'/add'}"><font style="color:gray">成员管理</font></a>
                    <br>
                    <a v-link="{path:'/add'}"><font style="color:gray">转让系统</font></a>
                    <br>
                    <a ><font style="color:gray">删除系统</font></a>
                </div>
            </div>
        </li>
    </ul>
    <div class="line"></div>
    <div class="cb">
       <div style="float:left">
           <h3 style="color:#9a9cff">{{current_chose_system.system_name}}系统-旗下项目</h3>
       </div>
       <div style="float:right;">
            <a v-link="{path:'/add'}"><font style="color:#65C3FF"><i class="iconfont icon-add2" style="font-size:15px">增加子项目</i></font></a>
       </div>
    </div>
    <div class="line"></div>
    <ul class="cb db-wel-items" >
         <li   class="fl"   v-for="(index,project ) in current_projects"  style="height:150px" style="width:430px"  >
            <div class="cb ta-c">
                 <a @click="doProjectChanged(index,project.project_id)" v-bind:class="project.project_id == current_chose_project.project_id ? 'project_chosed' : ''">
                     <i class="iconfont icon-project fl"></i>
                     <div class="fl db-wel-item">
                         <h3>{{project.project_name}}</h3>
                     </div>
                 </a>
                 <div  style="float:left;margin-left:10px" v-bind:class="project.project_id != current_chose_project.project_id ? 'displaynone' : ''">
                     <a v-link="{path:'/add'}"><font style="color:gray">项目基本设置</font></a>
                     <br>
                     <a v-link="{path:'/add'}"><font style="color:gray">成员管理</font></a>
                     <br>
                     <a v-link="{path:'/add'}"><font style="color:gray">转让项目</font></a>
                     <br>
                     <a v-link="{path:'/add'}"><font style="color:gray">删除项目</font></a>
                     <br>
                     <a v-link="{path:'/add'}"><font style="color:gray">环境url设置</font></a>
                 </div>
                 <div style="float:left;margin-left:10px" v-bind:class="project.project_id != current_chose_project.project_id ? 'displaynone' : ''">
                      <a v-link="{path:'/add'}"><font style="color:gray">签到获取密钥</font></a>
                      <br>
                      <a v-link="{path:'/add'}"><font style="color:gray">签名加密字段池</font></a>
                      <br>
                      <a v-link="{path:'/add'}"><font style="color:gray">公共报文头尾</font></a>
                      <br>
                      <a v-link="{path:'/add'}"><font style="color:gray">导出文档</font></a>
                      <br>
                      <a v-link="{path:'/add'}"><font style="color:gray">错误码管理</font></a>
                  </div>
                  <div style="height:95px;width:1px;background:#DDD;" class="fr"></div>
             </div>

         </li>


    </ul>
    <div class="line"></div>
    <div class="cb">
       <div style="float:left">
           <h3 style="color:#9a9cff" >{{current_chose_system.system_name}}系统-{{current_chose_project.project_name}}项目-旗下业务模块</h3>
       </div>
       <div style="float:right;">
           <a v-link="{path:'/add'}"><font style="color:#65C3FF"><i class="iconfont icon-add2" style="font-size:15px">增加子模块</i></font></a>
       </div>
    </div>
    <div class="line"></div>
    <ul class="cb db-wel-items">
         <li class="fl"  v-for="module in current_modules">
            <div class="cb">
                 <a @click="doModuleChanged(module.module_id)" v-bind:class="module.module_id == current_chose_module_id ? 'project_chosed' : ''">
                     <div class="fl db-wel-item">
                         <h3>{{module.module_name}}</h3>
                     </div>
                     <div class="fl db-wel-item" style="float:left;margin-left:10px;vertical-align:middle" v-bind:class="module.module_id != current_chose_module_id ? 'displaynone' : ''">
                         <a v-link="{path:'/add'}"><font style="color:gray">模块基本设置</font></a>
                         <br>
                         <a v-link="{path:'/add'}"><font style="color:gray">子url</font></a>
                     </div>
                 </a>
             </div>
         </li>


    </ul>
    <div class="line"></div>
    </br></br></br></br></br></br></br></br></br></br>
    <a v-link="{path:'/todo'}"><i class="iconfont icon-list1" style="font-size: 10px;color:red">butterfly开发待办任务</i> </a>
    <a v-link="{path:'/icons'}"><i class="iconfont icon-list1" style="font-size: 10px;color:red">iCons样式demo</i></a>

</div>


</template>
<script>
    import utils from '../../src/utils.js'

    var gdata={
        ggggg:1,
        v_name:"welcome",
        current_chose_system:{},
        current_chose_project:{},
        current_chose_module_id:'',
        current_projects:{},
        current_modules:{},
        system_list:{}
    };
    export default{
        name:"welcome",
        route:{
            activate: function (transition) {
                this.$parent.$data.welcome = true;
                this.$parent.pageName ='';
                transition.next();
            },
            deactivate: function (transition) {
                transition.next();
            }
        },
        data:function(){
            return gdata;
        },
        created:function(){
            this.system_list=this.$router.app.$children[0].system_list;
            this.current_projects=this.system_list[0].project_list;
            this.current_modules=this.current_projects[0].module_list;
            this.current_chose_system=this.system_list[0];
            this.current_chose_project=this.current_projects[0];
        },
        methods:{
            import2mjson:function(e){
                if (e.target.files.length === 0) { return; }  //未选取图片时防止报错
                let file = e.target.files[0];       //获取用户选取的图片
                var fd = new FormData();
                fd.append('mjson',file);
                utils.fileloader('/project/importmjson.json',fd,function(rs){
                    toastr.success('导入成功');
                    setTimeout(function(){
                        location.reload();
                    },1000);
                });
            },
            doSystemChanged:function(index,system_id){
                this.current_projects=this.system_list[index].project_list;
                this.current_modules=this.current_projects[0].module_list;
                this.current_chose_system=this.system_list[index];
                this.current_chose_project=this.current_projects[0];
                this.current_chose_module_id='';
            }
            ,
            doProjectChanged:function(index,project_id){
                this.current_modules=this.current_projects[index].module_list;
                this.current_chose_project=this.current_projects[index];
                this.current_chose_module_id='';
            }
            ,
            doModuleChanged:function(module_id){
                this.current_chose_module_id=module_id;
            }
        }
    }
</script>